import React, { PureComponent } from 'react'
import { Table, Avatar, Button, Menu, Dropdown, Icon } from 'antd';

export default class List extends PureComponent {
    componentDidMount() {
        const { getTable } = this.props
        getTable()
    }

    handleMenuClick = (e, record) => {
        const { showModal, editDataSource } = this.props
        switch (e.key) {
            case 'edit':
                showModal(record.id)
                break;

            case 'delete':
                editDataSource(record.id)
                break;

            default:
                break;
        }
    }

    render() {
        const { dataSource, current, totalPage, getTable } = this.props
        const columns = [
            {
                title: '头像',
                key: 'avatar',
                align: 'center',
                render: record => <Avatar size={30} src={record.avatar.replace('#', "")} />
            },
            {
                title: '姓名',
                dataIndex: 'name',
                align: 'center',
                key: 'name',
            },
            {
                title: '年龄',
                dataIndex: 'age',
                align: 'center',
                key: 'age',
            },
            {
                title: '地址',
                dataIndex: 'address',
                align: 'center',
                key: 'address',
            },
            {
                title: '邮箱',
                dataIndex: 'mailbox',
                align: 'center',
                key: 'mailbox',
            },
            {
                title: '创建时间',
                dataIndex: 'createTime',
                align: 'center',
                key: 'createTime',
            },
            {
                title: '操作',
                key: 'action',
                align: 'center',
                render: record => (
                    <Dropdown 
                    overlay={
                    <Menu onClick={(e) => { this.handleMenuClick(e, record) }}>
                        <Menu.Item key="edit">修改</Menu.Item>
                        <Menu.Item key="delete">删除</Menu.Item>
                    </Menu>}>
                        <Button size="small" style={{ border: 0 }}>
                            <Icon type="bars" /><Icon type="down" />
                        </Button>
                    </Dropdown>
                )
            }
        ]
        const paginationProps = {
            showQuickJumper: false,
            pageSize: 10,
            defaultCurrent: current,
            total: (totalPage * 10),
            onChange: (current) => getTable(current)
        }
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
                name: record.name,
            }),
        }
        return (
            <div>
                <Table
                    rowKey={record => record.id}
                    dataSource={dataSource}
                    columns={columns}
                    pagination={paginationProps}
                    rowSelection={rowSelection}
                    bordered
                />
            </div>
        )
    }
}
